<template>
  <div class="fillcontain">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>歌手详情</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="toReturn">返回</el-button>
      </div>
      <el-form :inline="true" size="small">
        <el-form-item prop="pictureUrl" label="头像" align="center">
      　　　　<img :src="singerDetail.pictureUrl" width="96" height="64" class="head_pic"/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称：">{{ singerDetail.name }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生日：">{{ singerDetail.birthday }}</el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="简介">
          {{ singerDetail.description }}
        </el-form-item>
      </el-form>

    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>歌曲列表</span>
      </div>
    <el-table
      :data="tableData"
      border
      highlight-current-row
      header-cell-class-name="table-header-class"
      style="width:100%"
      v-loading="loading"
    >
     <el-table-column prop="name" label="名称" align="center"></el-table-column>
      <el-table-column prop="albumName" label="专辑名称" align="center">        
        <template scope="scope">
          <div style="color:blue;text-decoration:underline;cursor:pointer;" @click="toAlbumDetail(scope.row.albumId)">{{ scope.row.albumName }}</div>
        </template>
        </el-table-column>
      <el-table-column prop="fileUrl" label="歌曲文件" align="center">
        <template slot-scope="scope">
          <a :href="scope.row.fileUrl" target="_blank" class="buttonText">{{scope.row.filePath}}</a>
      </template>
      </el-table-column>
      <el-table-column prop="timeLengthText" label="歌曲时长" align="center"></el-table-column>
      <el-table-column prop="fileSizeText" label="文件大小" align="center"></el-table-column>
    </el-table>
    <el-row class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper, sizes"
        :page-size="page.pageSize"
        :page-sizes="[2,5,10,20,50,100]"
        :total="page.total"
        @current-change="pageChange"
        @size-change="sizeChange"
      ></el-pagination>
    </el-row>
    </el-card>
  </div>
</template>

<script>
import * as singerApi from "@/api/singerApi";
import * as musicApi from "@/api/musicApi";
export default {
  data() {
    return {
      singerDetail: {},
      page: {
        page: 1,
        pageSize: 10,
        total: 1
      },
      loading: false,
      tableData: [],
      searchForm: {}
    };
  },
  async mounted() {
    singerApi.getSingerInfo({ id: this.$route.query.id }).then(res => {
      if (res.errorCode == 0) {
        this.singerDetail = res.data;
      }
    });
    await this.getMusicList();
  },
  methods: {
    getMusicList() {
      return new Promise((resolve, reject) => {
        let requestData = Object.assign(
          { id: this.$route.query.id },
          this.page,
          this.searchForm
        );
        this.loading = true;
        musicApi
          .getSingerMusicList(requestData)
          .then(res => {
            if (res.errorCode == 0) {
              console.log("---------------------");
              console.log(res);
              this.page.total = res.totalCount;
              this.tableData = res.data;
            }
            resolve();
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },
    toAlbumDetail(id) {
      this.$router.push({ name: "albumMusicDetail", query: { id } });
    },
    pageChange(page) {
      this.page.page = page;
      this.getMusicList();
    },
    sizeChange(size) {
      this.page.pageSize = size;
      this.getMusicList();
    },
    toReturn() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scope>
.fillcontain {
  height: calc(100vh - 180px);
  padding: 30px;
  overflow: auto;
  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
.card-item {
  line-height: 40px;
}
</style>
